<template>
  <v-card flat height="168">
    <v-spacer class="d-flex dialog-content">
      <v-col class="bold-text"> Are you sure to delete? </v-col>
      <v-col>
        {{ propMessageInfo.infoCode }} {{ propMessageInfo.infoDescription }}
      </v-col>
      <v-col>
        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-btn
              v-on="on"
              v-bind="attrs"
              @click="deleteMessageInfo"
              width="32"
              height="32"
              color="#D9D9D9"
              fab
              elevation="0"
              class="send-btn ml-2"
            >
              <v-icon class="send-icon" color="#556282" small>
                mdi-delete
              </v-icon>
            </v-btn>
          </template>
          <span>Delete Message Info</span>
        </v-tooltip>
      </v-col>
    </v-spacer>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component({
  props: {
    messageInfo: Object,
  },
})
export default class DeleteMessageInfo extends Vue {
  get propMessageInfo() {
    return this.$props.messageInfo;
  }

  deleteMessageInfo() {
    this.$emit("delete", this.propMessageInfo.id);
  }
}
</script>
<style lang="scss">
@import "@/components/Quotation/Dialog/Dialog.scss";
</style>
